<template>
  <div class="login">
    <div>登录阅读</div>
    <div class="login_ul">
      <ul>
        <li>webpack开发：npm run dev</li>
        <li>vite开发：npm run vite</li>
        <li>
          项目基于使用了vue的 CDN 外部链接，但是vite不支持对外部文件进行处理，
          所以在开发的时候将vue安装到devDependencies，打包使用webpack打包。
          不影响打包后使用 CDN 链接
        </li>
        <li></li>
      </ul>
    </div>
    <div class="login_btn">
      <button @click="setToken">登录</button>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, reactive, toRaw, watch, toRefs } from "vue";
import router from "@/router/index.ts";
// import './index.scss';

export default {
  components: {},
  props: {},
  setup(props, { emit }) {
    const state = reactive({
      token: {
        name: "miss-tree",
        psw: "123456",
      },
    });

    const setToken = () => {
      localStorage.setItem("token", JSON.stringify(toRaw(state.token)));
      router.push("/home");
    };
    return {
      ...toRefs(state),
      setToken,
    };
  },
};
</script>

<style lang="scss" scoped>
@import url("../assets/css/index.scss");
.login_ul {
  text-align: left;
  line-height: 40px;
  ul {
    list-style: none;
  }
}
</style>
